<template>
    <div class="salary-panel">
        <div>
            <div class="salary-title">{{title}}</div>
            <div class="jin-e">金额</div>
            <div class="salary-amount">
                <VueCountUp :end-val="amount" :decimal-places="2" :duration="2" />
                </div>
            <div class="salary-unit">万元</div>
        </div>
        <div class="salary-icon">{{icon}}</div>
    </div>
</template>

<script setup lang="ts">
    import {computed} from 'vue';
    import VueCountUp from "vue-countup-v3";
    const props = defineProps<{
        type: 'month' | 'quarter' | 'year';
        amount: string | number;
    }>();

    const title = computed(() => {
        switch (props.type) {
            case 'month':
                return '本月已发工资';
            case 'quarter':
                return '本季已发工资';
            case 'year':
                return '本年已发工资';
            default:
                return '';
        }
    });

    const icon = computed(() => {
        switch (props.type) {
            case 'month':
                return '月';
            case 'quarter':
                return '季';
            case 'year':
                return '年';
            default:
                return '';
        }
    });
</script>

<style lang="less" scoped>
    @import '../variables.less';

    .salary-panel {
        flex: 1; // Take equal space
        background-image: url("../../../assets/top-item.png");
        background-repeat: no-repeat;
        border-radius: 5px;
        padding: @panel-padding;
        width: 219px;
        background-size: 100% 100%;
        text-align: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .salary-title {
        font-size: 22px;
        color: white;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .jin-e {
        color: #3d79ae;
        text-align: left;
        background-image: url("../../../assets/tab-icon.png");
        height: 20px;
        width: 80px;
        background-repeat: no-repeat;

    }

    .salary-amount {
        font-size: 22px;
        font-weight: bold;
        text-align: left;
        color: @primary-color;
    }

    .salary-unit {
        font-size: 12px;
        color: darken(@text-color, 10%);
        display: block;
        text-align: left;
    }

    .salary-icon {
        font-size: 18px;
        color: white;
        background: rgba(0, 30, 60, 0.5);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>